<template>
    <div class="w750" :class="themes.theme">
		<div v-if="isShowAchievementType" class="btns flex-center">
		  <a href="javascript:;" class="btn-a" :class="{cur: achievementType === 1}" @click="changeAchievementType(1)">分享奖励</a>
		  <a href="javascript:;" class="btn-a" :class="{cur: achievementType === 2}" @click="changeAchievementType(2)">达标奖励</a>
		</div>
        <template v-if="achievementType === 1">
			<van-tabs v-model="params.status" @change="changeTag" :color="themes.color" :title-active-color="themes.color">
			    <van-tab title="待结算" name="0" />
			    <van-tab title="已结算" name="10" />
			    <van-tab title="已取消" name="-10" />
			</van-tabs>
			<div class="account-det">
			    <van-list
			        v-model="paging.loading"
			        :finished="paging.finished"
			        :finished-text="!paging.emptylist ? '没有更多了' : ''"	
			        @load="onLoad"
			        :immediate-check="false"
			        :error.sync="paging.error"
			        error-text="请求失败，点击重新加载"
			        v-if="!paging.emptylist"
			    >
			        <div class="account-det-list">
			            <div class="item cur" v-for="(order, index) in myCommisData" :key="index">
			                <div class="item-left">
			                    <div class="txt">{{ order.commissionType | getCommissionType }}</div>
			                    <div class="time">{{ order.updateTime | dateformat('YYYY-MM-DD HH:mm:ss') }}</div>
			                </div>
			                <div class="item-right">
			                    <template v-if="commissionType == 'CASH'">
			                        <span class="price" :style="{ color: themes.color }">
			                            +
			                            <em class="now" :style="{ color: themes.color }">{{ Money(order.commission)[0] }}</em>
			                            .{{ Money(order.commission)[1] }}
			                        </span>
			                    </template>
			                    <template v-if="commissionType == 'INTEGRAL'">
			                        <span class="price" :style="{ color: themes.color }">
			                            +
			                            <em class="now" :style="{ color: themes.color }">{{ order.commission }}</em>
			                            {{ integralName }}
			                        </span>
			                    </template>
			                </div>
			            </div>
			        </div>
			    </van-list>
			
			    <Noempty
			        class="Noempty"
			        :pic="require('../../../assets/images/record-empty.png')"
			        :title="'您没有相关记录'"
			        v-if="paging.emptylist && !paging.error"
			    />
			</div>
		</template>
		<template v-if="achievementType === 2">
			<div class="account-det">
			    <van-list
			        v-model="standardPaging.loading"
			        :finished="standardPaging.finished"
			        :finished-text="!standardPaging.emptylist ? '没有更多了' : ''"	
			        @load="onLoadStandard"
			        :immediate-check="false"
			        :error.sync="standardPaging.error"
			        error-text="请求失败，点击重新加载"
			        v-if="!standardPaging.emptylist"
			    >
			        <div class="account-det-list">
			            <div class="item cur" v-for="(order, index) in standardList" :key="index">
			                <div class="item-left">
			                    <div class="txt">业绩奖励</div>
			                    <div class="time">{{ order.cycleEndTime | dateformat('YYYY-MM-DD HH:mm:ss') }}</div>
			                </div>
			                <div class="item-right">
			                    <span class="price" :style="{ color: themes.color }">
			                        +
			                        <em class="now" :style="{ color: themes.color }">{{ Money(order.totalAwardAmount)[0] }}</em>
			                        .{{ Money(order.totalAwardAmount)[1] }}
			                    </span>
			                </div>
			            </div>
			        </div>
			    </van-list>
			
			    <Noempty
			        class="Noempty"
			        :pic="require('../../../assets/images/record-empty.png')"
			        :title="'您没有相关记录'"
			        v-if="standardPaging.emptylist && !standardPaging.error"
			    />
			</div>
		</template>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import { myCommisDetailList, distributionTeamAwardBillDetail, showAchievementRewardsFlag } from 'api/extensionApi'
import PageUtil from 'utils/PageUtil'
const pageUtil = new PageUtil(myCommisDetailList, {
    field: {
        list: 'myCommisData'
    }
})
const standardPageUtil = new PageUtil(distributionTeamAwardBillDetail, {
    field: {
        list: 'standardList',
		paging: 'standardPaging'
    }
})
export default {
    components: {
        Noempty
    },
    data() {
        return {
            paging: {
                tab: false,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
			standardPaging: {
			    tab: false,
			    loading: false,
			    finished: false,
			    error: false, // 是否错误
			    emptylist: false // 是否显示列表为空时的样式
			},
            Money: cash,
            myCommisData: [],
			standardList: [],
            commissionType: null,
            params: {
                status: 0
            },
			standardParams: {},
			isShowAchievementType: false,
			achievementType: 1,// 奖励类型： 1：分享奖励， 2:：达标奖励
        }
    },
    computed: {
        ...mapState(['themes', 'integralName'])
    },
    filters: {
        getCommissionType(value) {
            const dict = {
                DISTRIBUTION_COMMISSION: '分享佣金',
                DIFFERENTIAL_COMMISSION: '级差佣金',
                SELF_COMMISSION: '自购佣金',
                LEVEL_AWARDS: '平级奖励',
                PERFORMANCE_AWARD: '业绩奖励',
                DISTRIBUTION_TEAM_AWARD: '达标奖励'
            }
            return dict[value]
        }
    },
    mounted() {
        this.commissionType = this.$route.query.commissionType
        pageUtil.loadListByPage(this, this.params)
		this.isShowAchievementFun()
    },
    methods: {
		// 改变奖励类型
		changeAchievementType(type) {
			if(this.achievementType === type) {
				return false
			}
			this.achievementType = type
			if(this.achievementType === 2 && this.standardList.length === 0) {
				this.$set(this.standardParams, 'curPageNO', 1)
				standardPageUtil.loadListByPage(this, this.standardParams)
			}
			
		},
        onLoad() {
            //vant-list下拉加载方法
            pageUtil.loadListByPageMore(this.params)
        },
		onLoadStandard() {
            //vant-list下拉加载方法
            standardPageUtil.loadListByPageMore(this.params)
        },
		// 是否显示达标奖励
		isShowAchievementFun() {
			showAchievementRewardsFlag().then(res => {
				if (res.status == 1) {
				  this.isShowAchievementType = res.result || false
				}
			})
		},
        // 切换tab
        changeTag(name) {
            this.$set(this.params, 'status', name)
            this.$set(this.params, 'curPageNO', 1)
            pageUtil.loadListByPage(this, this.params)
        }
    }
}
</script>

<style src="../../../assets/css/pre-deposit.css" scoped></style>
<style type="text/css" scoped>
	.btns {
	  padding: 10px;
	  background: #fff;
	  width: 100%;
	  max-width: 750px;
	  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
	  overflow: hidden;
	}
	.btns .btn-a {
	  display: block;
	  width: 50%;
	  text-align: center;
	  position: relative;
	  line-height: 28px;
	  font-size: 14px;
	}
	.btns .btn-a:first-child:after {
	  height: 14px;
	  width: 1px;
	  content: " ";
	  display: block;
	  font-size: 0;
	  background: #ccc;
	  position: absolute;
	  right: 0;
	  top: 8px;
	}
	/* 绿色(green) */
	.green .btns .btn-a.cur {
	  color: #4eae31;
	}
	/* end 绿色(green) */
	
	/* 深红色(crimson) */
	.crimson .btns .btn-a.cur {
	  color: #de0233;
	}
	/* end 深红色(crimson) */
	
	/* 红色(red) */
	.red .btns .btn-a.cur {
	  color: #e5004f;
	}
	/* end 红色(red) */
	
	/* 浅红色(pale-red) */
	.pale-red .btns .btn-a.cur {
	  color: #fd8cb0;
	}
	/* end 浅红色(pale-red) */
	
	/* 橙色(orange) */
	.orange .btns .btn-a.cur {
	  color: #ff6700;
	}
	/* end 橙色(orange) */
	
	/* 棕色(brown) */
	.brown .btns .btn-a.cur {
	  color: #bc9f5f;
	}
	/* end 棕色(brown) */
	
	/* 蓝色(blue) */
	.blue .btns .btn-a.cur {
	  color: #2e82e3;
	}
	/* end 蓝色(blue) */
	
	/* 浅绿(light-green) */
	.light-green .btns .btn-a.cur {
	  color: #5fc221;
	}
	/* end 浅绿(light-green) */
	
	/* 黑色(black) */
	.black .btns .btn-a.cur {
	  color: #333333;
	}
	.black .btns .btn-a.cur {
	  font-weight: 600;
	}
	
</style>
